<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户登录</title>
    <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
    <script src="/static/bootstrap/js/bootstrap.min.js"></script>
    <script src="/static/jquery-3.6.0.min.js"></script>
    <script src="/static/md5.js"></script>
</head>
<style>
    .myDisClass{
        display: none;
    }
</style>
<body>

<div class="container-md col-md-4">

    <h2 style="text-align: center; margin-bottom: 50px; margin-top: 30px">用户登录</h2>
    <div class="mb-md-4 row">
        <label for="username" class="col-md-2 col-form-label"
               style="text-align: justify;text-align-last: justify">用户名</label>
        <div class="col-md-10">
            <input type="text" id="username" name="username" class="form-control" placeholder="输入用户名"/>
        </div>
    </div>
    <div class="mb-md-4 row">
        <label for="password" class="col-md-2 col-form-label"
               style="text-align: justify;text-align-last: justify">密码</label>
        <div class="col-md-10">
            <input type="password" id="password" name="password" class="form-control" placeholder="输入密码"/>
        </div>
    </div>

    <div class="mb-md-4 row">
        <label class="col-md-2 col-form-label"></label>
        <div class="col-md-6 ">
            <div class="form-check">
                <input class="form-check-input" checked name="rememberMe" type="checkbox" id="rememberMe">
                <label class="form-check-label" for="rememberMe">
                    记住我
                </label>
            </div>
        </div>
        <div class="col-md-4">
            <div style="text-align: right">
                <input id="loginByVerificationCodeBtn" type="button" class="btn btn-primary" value="短信验证码登录?">
            </div>
        </div>
    </div>

    <div class="mb-md-4 row">
        <label class="col-md-2 col-form-label"></label>
        <div class="col-md-10  d-grid gap-3">
            <button class="btn btn-lg btn-primary btn-block" id="userLogin" type="button">登录</button>
            <button class="btn btn-lg btn-primary btn-block" id="gotoRegister" type="button">注册</button>
        </div>
    </div>
</div>

<!--toast-->
<div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center w-100">
    <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="d-flex">
            <div class="toast-body">

            </div>
            <button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
        </div>
    </div>
</div>

<script th:inline="javascript">
    const options = {
        animation: true, // 开启过渡动画
        autohide: true, // 开启自动隐藏
        delay: 2000 // 3000ms后自动隐藏
    }
    $(function () {

        userRegister();
        //首先查看用户是否登录过，如果登录过，则自动填写帐号和密码
        let cookieData = JSON.parse([[${resData}]]);
        //用户名自动回显
        if (cookieData.resCode == 200) {
            $("[name=username]").val(cookieData.resObj.username);
            $("[name=password]").val(cookieData.resObj.password);
        }
        gotoLogin(cookieData);
        verificationLogin();
    });

    function userRegister() {
        $("#gotoRegister").click(function () {
            location.href = "/user/register";
        });
    }

    function gotoLogin(cookieData) {
        $("#userLogin").click(function () {
            let username = $("[name=username]").val();
            let password = $("[name=password]").val();
            //当前密码与后端回显密码不相同时，对密码进行md5加密（此种情况下表示用户自动输入了密码）
            if (password != cookieData.resObj.password && password != "") {
                password = hex_md5(password);
            }
            let rememberMe = $("[name=rememberMe]").prop("checked");
            $.post("/user/userLogin?t=" + new Date().getTime(), {
                "username": username,
                "password": password,
                "rememberMe": rememberMe
            }, function (data) {
                let resData = JSON.parse(data);
                console.log(resData);
                if (resData.resCode == 200) {
                    $(".toast-body").text(resData.resMsg + "正在跳转到首页！");
                    getToast($(".toast")).show();
                    setTimeout(function () {
                        location.href = "/user/index";
                    }, 1000);
                } else {
                    $(".toast-body").text(resData.resMsg);
                    getToast($(".toast")).show();
                }
            });
        });
    }

    //初始化toast
    function getToast(element) {
        return new bootstrap.Toast(element, options);
    }

    function verificationLogin() {
        $("#loginByVerificationCodeBtn").click(function () {
            location.href="/user/loginCode"
        });
    }
</script>
</body>
</html>